<template>
  <div class="login-page">
    <div class="login-mobile">
      <div class="logo-wrap">
        <img class="logo" :src="logoImg" alt="logo" />
      </div>
      <div class="title">AI图片助手</div>

      <el-form
        ref="loginFormRef"
        :model="formData"
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item prop="username" class="field">
          <el-input
            v-model="formData.username"
            placeholder="请输入账号"
            size="large"
            clearable
          >
            <template #prefix>
              <div class="prefix">
                <el-icon class="icon"><User /></el-icon>
                <span class="label">账号：</span>
              </div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password" class="field">
          <el-input
            v-model="formData.password"
            type="password"
            show-password
            placeholder="请输入密码"
            size="large"
          >
            <template #prefix>
              <div class="prefix">
                <el-icon class="icon"><Lock /></el-icon>
                <span class="label">密码：</span>
              </div>
            </template>
          </el-input>
        </el-form-item>

        <el-button
          type="primary"
          class="submit-btn"
          @click="login"
          :loading="loading"
        >登录</el-button>
      </el-form>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
// @ts-ignore
import logoImg from "../../assets/images/login/app_logo.png";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "../../store/user";

const router = useRouter();
const userStore = useUserStore();
const loginFormRef = ref<FormInstance>();
const loading = ref(false);
const formData = reactive({
  username: "",
  password: "",
});

// 登录表单校验规则
const loginRules = reactive<FormRules>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const login = async () => {
  // router.push({path:'/'})
  if (!loginFormRef.value) return;
  await loginFormRef.value.validate();
  loading.value = true;
  try {
    await userStore.login({
      password: formData.password,
      username: formData.username,
    });
  } catch (error) {
    loading.value = false;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
});
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 0 10%;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff5f3; 
}

.login-mobile {
  padding-top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.title {
  margin-top: 14px;
  font-size: 32px;
  font-weight: 800;
  color: #1c1c1c;
  letter-spacing: 2px;
}

.login-form {
  width: 100%;
  margin-top: 40px;
  text-align: center;
}

.field {
  margin-bottom: 22px;
}

.field :deep(.el-input__wrapper) {
  height: 64px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  border: 0;
  background: #ffffff;
}

.prefix {
  display: inline-flex;
  align-items: center;
}

.prefix .icon {
  color: #8c8c8c;
  margin-right: 6px;
}

.prefix .label {
  color: #333;
  font-weight: 600;
}

.submit-btn {
  width: 180px;
  height: 54px;
  background: #ff5a62;
  border-color: #ff5a62;
  box-shadow: 0 10px 18px rgba(255, 90, 98, 0.35);
  margin-top: 20px;
}
</style>
